<script setup>
// 定义props
defineProps({
  // 主标题
  title: {
    type: String,
  }
})
</script>

<template>
  <div class="product-lay">
    <div class="layout">
      <div class="product-list">
<!--        主标题-->
        <h2><a href="#" class="more">MORE+</a>{{title}}</h2>
        <ul>
          <li>
            <a href="product.html"><img src="/src/assets/img/p1.jpg" /></a>
            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>
            <h4>品牌：<a href="#">奥迪</a></h4>
            <p>￥260,000</p>
          </li>
          <li>
            <a href="product.html"><img src="/src/assets/img/p2.jpg" /></a>
            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>
            <h4>品牌：<a href="#">奥迪</a></h4>
            <p>￥260,000</p>
          </li>
          <li>
            <a href="product.html"><img src="/src/assets/img/p5.jpg" /></a>
            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>
            <h4>品牌：<a href="#">奥迪</a></h4>
            <p>￥260,000</p>
          </li>
          <li>
            <a href="product.html"><img src="/src/assets/img/p6.jpg" /></a>
            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>
            <h4>品牌：<a href="#">奥迪</a></h4>
            <p>￥260,000</p>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<style scoped>
.product-list li h3 {
  line-height: 32px;
  font-weight: normal;
}

.product-list li h3 a:hover,
.product-list li h4 a:hover {
  color: #f64747;
}

.product-list li h4 {
  color: #a4a4a4;
  line-height: 24px;
  font-weight: normal;
}

/* .product-list li a:hover img {
	opacity: 0.8;
}
 */
.product-list li:hover{
  box-shadow: 0 0 16px #ccc;
}

.product-lay {
  width: 1200px;
  margin: 0 auto;
}

.product-lay {
  padding-top: 1px;
  background-color: #f9f9f9;
  padding-bottom: 48px;
}

.product-list ul {
  overflow: hidden;
}

.product-list li {
  width: 282px;
  height: 380px;
  background-color: #FFFFFF;
  float: left;
  margin-left: 24px;
  text-align: center;
  color: #000000FF;
}

.product-list li:nth-child(4n+1) {
  margin-left: 0;
}

.product-list li h3 {
  line-height: 32px;
  font-weight: normal;
}

.product-list li h4 {
  color: #a4a4a4;
  line-height: 24px;
  font-weight: normal;
}

.product-list li h4 a {
  color: #a4a4a4;
}

.product-list li a:hover img {
  opacity: 0.8;
}

.product-list p {
  color: #a4a4a4;
  line-height: 24px;
}
</style>
